<!--  -->
<template>
  <div class="login-container">
    <el-row>
      <el-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="login-container-form">
          <header>
            <img src="@/assets/images/logo.png" />
            <h1>Dxcorp Data</h1>
          </header>
          <el-form :model="form" @submit="handleSubmit" @submit.prevent>
            <el-form-item>
              <el-input
                v-model="form.username"
                size="large"
                placeholder="Username"
              >
                <!-- <template v-slot:prefix><user-outlined type="user" /></template> -->
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.password"
                size="large"
                type="password"
                placeholder="Password"
              >
                <!-- <template v-slot:prefix><lock-outlined type="user" /></template> -->
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                @click="handleSubmit"
                block
              >
                Login in
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */
// import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRefs, watch, watchEffect,onMounted } from "vue";
// import { message } from "ant-design-vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
// import { useStore } from "vuex";
import store from "@/store/index";

export default {
  name: "Login",
  components: {
    // UserOutlined,
    // LockOutlined,
  },

  setup() {
    // const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      form: {
        username: "admin",
        password: "123456",

        redirect: undefined,
        otherQuery: {},
      },
    });

    watch(
      () => route.fullPath,
      (n, o) => {
        console.log(route.fullPath, "route");

        state.redirect = n.split("=")[1];
        console.log(n, "--", o);
        console.log("route.query", route.query);
      },
      // { deep: true },
      {immediate: true}
    );

    const handleSubmit = async () => {
      const { username, password } = state.form;
      if (username.trim() == "" || password.trim() == "")
        return ElMessage.warning("用户名和密码不能为空");
      const res = await store.dispatch("user/login", state.form);

      // router.push({ path: state.redirect || "/", query: state.otherQuery });
      router.push({ path: state.redirect || "/" });
    };

    /* 返回 */
    return {
      ...toRefs(state),
      handleSubmit,
    };
  },
};
</script>
<style lang='scss' scoped>
.login-container {
  height: 100vh;
  background: url("~@/assets/images/login/login_bg.png");
  background-size: cover;
  &-form {
    width: calc(100% - 40px);
    height: 380px;
    padding: 4vh;
    margin-top: calc((100vh - 380px) / 2);
    margin-right: 20px;
    margin-left: 20px;
    background: url("~@/assets/images/login/login_form.png");
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    background-color: #fff;

    header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      img {
        display: inline-block;
        width: 40px;
      }

      h1 {
        margin-bottom: 0;
        font-size: 24px;
        color: #222;
        text-align: center;
      }
    }

    form {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      margin-top: 40px;
    }
  }
}
</style>